下面的例子为一个双击下拉框内容移动效果的demo
<!DOCTYPE html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.4.2.min.js" type="text/javascript"></script><link href="reset.css" type="text/css" rel="stylesheet" /><script language="javascript">$(function (){ //双击向右移动 $("#select1").dblclick(function(){ $("#select1 option:selected").appendTo("#select2"); }) //双击向左移动 $("#select2").dblclick(function(){ $("#select2 option:selected").appendTo("#select1"); }) //全部向右 $("#moveallright").click(function(){ $("#select1 option").appendTo("#select2"); }) //全部向左 $("#moveallleft").click(function(){ $("#select2 option").appendTo("#select1"); }) //选中的向右 $("#moveright").click(function(){ $("#select1 option:selected").appendTo("#select2"); }) //选中的向左 $("#moveleft").click(function(){ $("#select2 option:selected").appendTo("#select1"); }) });</script><style>*{ font-size:18px;}select{ width:116px;}.div1{ width:400px; float:left; text-align:right;}.div2{ width:400px; float:left; text-align:left; margin-left:50px;}select,button{ border:1px solid #CCC}</style><title>双击下拉框内容移动</title></head><body><div class="div1"> <select id="select1" multiple="multiple" size="10"> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> <option value="4">选项四</option> <option value="5">选项五</option> <option value="6">选项六</option> <option value="7">选项七</option> <option value="8">选项八</option> </select> <br /> <button id="moveright">向右移动>></button><br /> <button id="moveallright">全部向右>></button><br /></div><div class="div2"> <select id="select2" multiple="multiple" size="10"> <option value="9">选项九</option> </select> <br /> <button id="moveleft"><<向左移动</button><br /> <button id="moveallleft"><<全部向左</button><br /></div></body></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦